<template>
  <div class="search">
    <!-- 车辆管理 -->
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="85"
          class="search-form"
        >
          <FormItem label="登录账号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <FormItem label="所有人">
            <Input
              type="text"
              v-model="searchForm.vehicleOwner"
              placeholder="请输入所有人"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <FormItem label="驾驶驾驶员">
            <Input
              type="text"
              v-model="searchForm.driverName"
              placeholder="请输入驾驶驾驶员"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <FormItem label="车牌号码">
            <Input
              type="text"
              v-model="searchForm.vehicleNum"
              placeholder="请输入驾驶驾驶员"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <FormItem label="认证状态">
            <Select placeholder="请选择认证状态" v-model="searchForm.registStatus" style="width: 180px">
              <Option value="">全部</Option>
              <Option value="0">未认证</Option>
              <Option value="1">已认证</Option>
              <Option value="2">待审核</Option>
            </Select>
          </FormItem>
          <FormItem label="">
            <span  class="br">
              <Button @click="handleSearch" type="primary" icon="ios-search"
                >搜索</Button
              >
              <Button @click="handleReset">重置</Button>
              <Button @click="getDataList" icon="md-refresh">刷新</Button>
            </span>
          </FormItem>
        </Form>
      </Row>
      <Row>
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          ref="table"
          sortable="custom"
          @on-sort-change="changeSort"
          @on-selection-change="changeSelect"
        >
          <!--  -->
          <template slot-scope="{ row }" slot="action">
            <div style="display: flex">
              <div>
                <span
                  style="color: #2d8cf0; cursor: pointer"
                  @click="editVehicle(row)"
                  >查看
                </span>
              </div>
              <div>
                <Dropdown transfer trigger="click" style="margin-left: 20px">
                  <a href="javascript:void(0)" style="display: inline-block">
                    更多
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list" class="more-css">
                    <DropdownItem @click.native="operationRecordClick(row)"
                      >操作记录</DropdownItem
                    >
                  </DropdownMenu>
                </Dropdown>
              </div>
            </div>
          </template>
        </Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
          transfer
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
      <!-- 添加驾驶员弹框 -->
      <Modal v-model="addDriverModal" title="添加驾驶员">
        <Form :model="form" :label-width="80">
          <Row>
            <FormItem label="驾驶员">
              <Select v-model="derverId" filterable style="width: 350px">
                <Option
                  v-for="(item, index) in getUnboundDriver"
                  :key="index"
                  :value="item.userId"
                  >{{ item.nickName }} {{ item.mobile }}</Option
                >
              </Select>
            </FormItem>
          </Row>
        </Form>
        <div slot="footer">
          <Button
            :loading="Driverloading"
            style="margin-left: 45%"
            type="primary"
            @click="sureAddDriver"
            >添加</Button
          >
        </div>
      </Modal>
      <!-- 添加管理者弹框 -->
      <Modal v-model="addManageUserModal" title="添加管理人">
        <Form :model="form" :label-width="80">
          <Row>
            <FormItem label="管理人">
              <Select
                v-model="manageUserId"
                filterable
                @on-query-change="changeManageUser"
                style="width: 350px"
              >
                <Option
                  v-for="(item, index) in getManageUserList"
                  :key="index"
                  :value="item.manageUserId"
                  >{{ item.name }} {{ item.mobile }}</Option
                >
              </Select>
            </FormItem>
          </Row>
        </Form>
        <div slot="footer">
          <Button
            :loading="AddManagerUserloading"
            style="margin-left: 45%"
            type="primary"
            @click="sureAddManagerUser"
            >添加</Button
          >
        </div>
      </Modal>
    </Card>
    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- ---------------------------------  添加车辆--------------------------------- -->
    <div>
      <Drawer
        :title="vehicleText"
        :mask-closable="false"
        width="900"
        v-model="cehicleDrawer"
      >
        <div class="demo-spin-article">
          <div
            :class="
              this.vehicleLicenseForm.registStatus != 2 && this.showType == '1'
                ? 'DrawerDiv'
                : 'DrawerDiv1'
            "
          >
            <Form
              ref="vehicleLicense"
              :model="vehicleLicenseForm"
              :rules="formValidate"
              :label-width="115"
              inlin
            >
              <Row>
                <Col span="8" style="margin-left: -35px">
                  <div>
                    <FormItem label="驾驶驾驶员" prop="vehicleNum">
                      <Input
                        disabled
                        placeholder="请输入驾驶驾驶员"
                        v-model="actualOwner"
                        clearable
                        style="width: 160px"
                      />
                    </FormItem>
                  </div>
                </Col>
              </Row>
              <Row>
                <Col span="8" style="margin-left: -36px">
                  <FormItem label="车辆牌号" prop="vehicleNum">
                    <Input
                      placeholder="请输入车辆牌号"
                      v-model="vehicleLicenseForm.vehicleNum"
                      clearable
                      style="width: 175px"
                    />
                  </FormItem>
                </Col>
                <Col span="8" style="margin-left: -4px">
                  <FormItem label="车牌颜色" prop="colorType">
                    <Select
                      placeholder="请选择车牌颜色"
                      v-model="vehicleLicenseForm.colorType"
                      style="width: 190px"
                      :filterable="true"
                    >
                      <Option
                        v-for="(item, index) in coloType"
                        :key="index"
                        :value="item.value"
                        >{{ item.description }}</Option
                      >
                    </Select>
                  </FormItem>
                </Col>
                <Col span="8" style="margin-left: -0px">
                  <FormItem label="能源类型" prop="oilType">
                    <Select
                      placeholder="请选择能源类型"
                      v-model="vehicleLicenseForm.oilType"
                      :filterable="true"
                      style="width: 190px"
                    >
                      <Option
                        v-for="(item, index) in oilType"
                        :key="index"
                        :value="item.value"
                        >{{ item.description }}</Option
                      >
                    </Select>
                  </FormItem>
                </Col>
                <Col span="8" style="margin-left: -50px">
                  <FormItem label="所有人" prop="vehicleOwner">
                    <!-- <div slot="label" class="check">所有人</div> -->
                    <Input
                      placeholder="请输入所有人"
                      v-model="vehicleLicenseForm.vehicleOwner"
                      style="width: 190px"
                      clearable
                    />
                  </FormItem>
                </Col>
                <Col span="8" style="margin-left: 10px">
                  <FormItem label="发证机关" prop="issuingAuthority">
                    <Input
                      placeholder="请输入发证机关"
                      v-model="vehicleLicenseForm.issuingAuthority"
                      style="width: 190px"
                      clearable
                    />
                  </FormItem>
                </Col>
                <Col span="8" style="margin-left: 2px">
                  <FormItem label="识别代码" prop="vin">
                    <Input
                      placeholder="请输入车辆识别代码"
                      v-model="vehicleLicenseForm.vin"
                      style="width: 190px"
                      clearable
                    />
                  </FormItem>
                </Col>
                <Col span="11" style="margin-left: -7px">
                  <FormItem
                    label-width="185"
                    label="车辆可拉货类型（一级）"
                    prop="vehicleType"
                  >
                    <Select
                      clearable
                      placeholder="请选择车辆拉货类型"
                      v-model="vehicleLicenseForm.vehicleType"
                      style="width: 192px"
                      @on-change="VehicleTypeLengths"
                    >
                      <Option
                        v-for="(item, index) in vehicleLengths"
                        :key="index"
                        :value="item.value"
                        >{{ item.description }}</Option
                      >
                    </Select>
                  </FormItem>
                </Col>
                <Col span="12" style="margin-left: -5px">
                  <FormItem
                    label-width="185"
                    label="车辆可拉货类型（二级）"
                    prop="vehicleLengthto"
                  >
                    <Select
                      transfer
                      clearable
                      multiple
                      placeholder="请选择车辆拉货类型"
                      v-model="vehicleLicenseForm.vehicleLengthto"
                      style="width: 220px"
                    >
                      <Option
                        v-for="(item, index) in vehiclType"
                        :key="index"
                        :value="item.value"
                        >{{ item.description }}</Option
                      >
                    </Select>
                  </FormItem>
                </Col>

                <div style="width: 100%; height: 26px"></div>
              </Row>
              <Row style="margin-left: 12px">
                <Col span="6">
                  <Upload
                    class="Upload-border"
                    v-if="imgShow"
                    :on-progress="DrivingLicenseHomePage"
                    :beforeUpload="beforeUpload"
                    ref="fontUpload"
                    :show-upload-list="false"
                    :on-success="vehicleFontSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    :headers="header"
                    :data="{
                      fileType: 'VEHICLE_FONT_PIC',
                    }"
                    type="drag"
                    :action="uploadVehiclePic"
                    style="display: inline-block; width: 148px"
                  >
                    <div style="width: 148px; height: 92px; line-height: 75px">
                      <div class="demo-upload-list-vehicles">
                        <img
                          v-if="vehicleFontPicFileUrl != ''"
                          style="width: 58px"
                          height="100px"
                          :src="vehicleFontPicFileUrl"
                        />
                        <img
                          v-else
                          style="width: 58px"
                          height="100px"
                          src="@/assets/vehicleAtes/vehicle1.png"
                        />
                        <div
                          v-if="vehicleFontPicFileUrl != ''"
                          class="demo-upload-list-vehicles-cover"
                        >
                          <Icon
                            type="ios-eye-outline"
                            @click.stop="showPic(vehicleFontPicFileUrl)"
                          ></Icon>
                          <Icon
                            v-if="editImg"
                            type="ios-trash-outline"
                            @click.stop="handleRemove(vehicleFontPicFileUrl, 1)"
                          ></Icon>
                        </div>
                      </div>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-vehicle">
                    <template>
                      <Progress
                        v-if="DrivingLicenseHomePagetrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>
                  <div style="margin-top: 8px" class="check">
                    <span class="check_font"> 行驶证主页(主)</span>
                  </div>
                </Col>
                <Col span="6">
                  <Upload
                    class="Upload-border"
                    v-if="imgShow"
                    :on-progress="CopyBrivingLicens"
                    :beforeUpload="beforeUpload"
                    ref="backUpload"
                    :show-upload-list="false"
                    :on-success="vehicleBackSuccess"
                    :before-upload="handleBeforeUpload"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    type="drag"
                    :default-file-list="idCardBackPicFileList"
                    :headers="header"
                    :data="{
                      fileType: 'VEHICLE_BACK_PIC',
                    }"
                    :action="uploadVehiclePic"
                    style="display: inline-block; width: 148px"
                  >
                    <div style="width: 148px; height: 92px; line-height: 75px">
                      <!-- <Icon type="ios-camera" size="20"></Icon> -->
                      <div class="demo-upload-list-vehicles">
                        <img
                          v-if="vehicleBackPicFileUrl != ''"
                          style="width: 58px"
                          height="100px"
                          :src="vehicleBackPicFileUrl"
                        />
                        <img
                          v-else
                          style="width: 58px"
                          height="100px"
                          src="@/assets/vehicleAtes/vehicle2.png"
                        />
                        <div
                          v-if="vehicleBackPicFileUrl != ''"
                          class="demo-upload-list-vehicles-cover"
                        >
                          <Icon
                            type="ios-eye-outline"
                            @click.stop="showPic(vehicleBackPicFileUrl)"
                          ></Icon>
                          <Icon
                            v-if="editImg"
                            type="ios-trash-outline"
                            @click.stop="handleRemove(vehicleBackPicFileUrl, 2)"
                          ></Icon>
                        </div>
                      </div>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-vehicle">
                    <template>
                      <Progress
                        v-if="CopyBrivingLicenstrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>
                  <div style="margin-top: 8px" class="check">
                    <span class="check_font">行驶证副页(主)</span>
                  </div>
                </Col>
              </Row>
            </Form>
          </div>
          <!--  -->
          <div class="demo-drawer-footer-vehhcle">
            <div style="display: flex; justify-content: space-between">
              <div></div>
              <div>
                <Button
                  v-if="imgShow"
                  type="warning"
                  :loading="loadinVehicleInfo"
                  @click="submitVehicleInfo"
                  >保存资料</Button
                >
              </div>
            </div>
          </div>
          <Spin size="large" fix v-if="spinShow"></Spin>
        </div>
      </Drawer>
      <!-- 审核不审核通过 -->
      <Modal v-model="auditFailedModal" title="审核不通过">
        <span style="font-size: 15px">
          {{ confirmRejection }}
        </span>
        <Input
          style="margin-top: 10px"
          v-model="AuditFailedInput"
          type="textarea"
          :rows="4"
          placeholder="请输入审核不通过原因"
        />
        <div slot="footer">
          <Button @click="auditFailedModal = false">取消</Button>
          <Button
            :loading="loadingbut"
            type="primary"
            @click="auditRejectDetermine"
            >确定</Button
          >
        </div>
      </Modal>
      <!-- GPS -->
      <Modal v-model="ModalGPs" title="GPS设备号" width="330">
        <!-- <span style="font-size: 15px">
          {{ confirmRejection }}
        </span> -->
        <Input
          style="margin-top: 10px; width: 80%"
          v-model="inputGPS"
          placeholder="请输入GPS设备号"
        />
        <div slot="footer">
          <Button :loading="loadingosition" @click="getVehicleposition"
            >测试</Button
          >
          <Button :loading="loadingGPS" type="primary" @click="determineGPS"
            >确定</Button
          >
        </div>
      </Modal>
    </div>
    <Modal
      width="800"
      v-model="curMapAddress"
      title="车辆当前位置"
      @on-cancel="cancelMap"
    >
      <div style="margin-bottom: 10px">
        <div>定位车辆：{{ carVehicle }}</div>
        <div>当前车速：{{ carspd }}km/h</div>
        <div>定位时间：{{ carTime }}</div>
        <div>当前位置：{{ caraddress }}</div>
      </div>
      <div class="modal-box">
        <div style="width: 100%; height: 400px" id="themap" class="map"></div>
      </div>
      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button @click="curMapAddress = false" style="margin-left: 8px"
          >取消</Button
        >
      </div>
    </Modal>
    <!-- 个体户 -->

    <!-- 车主 -->
    <NewOwnerDetails
      @newOwnerDetailsEnd="newOwnerDetailsEnd"
      :newOwnerDetailsId="newOwnerDetailsId"
      :newOwnerDetails="this.newOwnerDetails"
    >
    </NewOwnerDetails>
    <operationRecord
      @operationRecordEnd="operationRecordEnd"
      :operationRecordData="operationRecordData"
      :operationRecordModal="this.operationRecordModal"
    >
    </operationRecord>
  </div>
</template>
<script>
// 根据你的实际请求api.js位置路径修改
import {
  companyVehicleManagementList,
  cancellationVehicle,
  getDriverLicenseId,
  saveVehicleLicenseInfo,
  vehicleRegistStatus,
  rebindingVehicle,
  updateGpsEquipment,
} from "@/api/user";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import {
  getDriverInfoByUserIds,
  getManageUserIdUser,
  bindingDriver,
  removeDriver,
  bindingManagerUser,
  removeManagerUser,
  addDownloadRecord,
  uploadVehiclePic,
  getActualdriverPage,
  Gaudemap,
} from "@/api/index";

import {
  vehicleposition, //车辆位置
} from "@/api/monitoring";

import NewOwnerDetails from "@/views/componentsonn_source_goods/newOwnerDetails";
import excel from "@/libs/excel";
// 根据你的实际添加编辑组件位置路径修改
import { getStore } from "@/libs/storage";
import operationRecord from "@/views/componentsonn_source_goods/operationRecord";
import * as imageConversion from "image-conversion";
export default {
  name: "vehicleInfoView",
  components: {
    DriverDetails,

    NewOwnerDetails,
    operationRecord,
  },
  data() {
    return {
      curMapAddress: false, //车辆弹框
      mapVehic: null,
      marker: null,
      caraddress: "",
      carspd: "",
      carVehicle: "",
      carTime: "",
      auditFailedModal: false, // 审核不通过
      confirmRejection: "",
      AuditFailedInput: "",
      loadingbut: false,
      nickNames: "",
      actualOwner: "",

      spinShow: false,

      newOwnerDetails: false, //车主弹框
      newOwnerDetailsId: "", //车主Id
      BidderdUserId: "", //报价人Id
      driverModalue: false, //驾驶员详情弹框

      currVehicleId: "", //当前选择的车辆ID
      //添加绑定驾驶员
      derverId: "", //当前选择的驾驶员ID
      addDriverModal: false, //添加驾驶员弹出框
      getUnboundDriver: [], //获取未绑定车辆的驾驶员
      Driverloading: false, //驾驶员添加按钮的加载
      //添加绑定管理者
      manageUserId: "", //管理者搜索
      searchManageUser: "", //管理者搜索框参数
      addManageUserModal: false, //添加管理人弹出框
      getManageUserList: [], //获取车辆管理人列表
      AddManagerUserloading: false, //管理人添加按钮的加载

      openSearch: true, // 显示搜索
      openTip: true, // 显示提示
      showType: "0", // 添加或编辑标识
      showDrawer: false, // 显示添加编辑抽屉
      loading: true, // 表单加载状态
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "ios-arrow-down",
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小

        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        mobile: "",
        vehicleOwner: "",
        driverName: "",
        manageUserName: "", //实际所有人
        registStatus: "", //默认查询全部
      },
      form: {},
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "#",
          type: "index",
          width: 60,
        },

        {
          title: "驾驶驾驶员",
          key: "driverName",
          minWidth: 120,
          tooltip: true,
        },

        {
          title: "车牌号码",
          key: "vehicleNum",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "GPS设备号",
          key: "gpsEquipment",
          minWidth: 130,
          sortable: false,
          render: (h, params) => {
            if (
              params.row.gpsEquipment == "" ||
              params.row.gpsEquipment == null
            ) {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.addGPS(params.row);
                      },
                    },
                  },
                  "添加"
                ),
              ]);
            } else {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.modifyGPS(params.row);
                      },
                    },
                  },
                  params.row.gpsEquipment
                ),
              ]);
            }
          },
        },
        {
          title: "车牌颜色",
          key: "colorType",
          minWidth: 100,
          render: (h, params) => {
            let text = this.$options.filters["VEHICLE_COLOR"](
              params.row.colorType
            );
            return h("div", text);
          },
        },
        {
          title: "能源类型",
          key: "oilType",
          minWidth: 100,
          sortable: false,
          render: (h, params) => {
            let text = this.$options.filters["OILTYPE"](params.row.oilType);
            return h("div", text);
          },
        },
        {
          title: "车辆类型",
          key: "vehicleType",
          minWidth: 100,
          sortable: false,
          render: (h, params) => {
            let text = this.$options.filters["TypeGoods"](
              params.row.vehicleType
            );
            return h("div", text);
          },
        },
        {
          title: "车辆识别代码",
          key: "vin",
          minWidth: 190,
          sortable: false,
          tooltip: true,
        },
        {
          title: "所有人",
          key: "vehicleOwner",
          minWidth: 220,
          tooltip: true,
        },
        {
          title: "更新时间",
          key: "updateTime",
          minWidth: 170,
          sortable: false,
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 180,
          sortable: false,
        },

        {
          title: "认证状态",
          key: "registStatus",
          minWidth: 100,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let colorStatus = "";
            let titleText = "";
            if (params.row.registStatus == 0) {
              colorStatus = "error";
              titleText = "未认证";
            } else if (params.row.registStatus == 1) {
              colorStatus = "success";
              titleText = "已认证";
            } else if (params.row.registStatus == 2) {
              colorStatus = "processing";
              titleText = "待审核";
            } else if (params.row.registStatus == 3) {
              colorStatus = "error";
              titleText = "已过期";
            } else if (params.row.registStatus == 4) {
              colorStatus = "default";
              titleText = "已注销";
            }
            return h("div", [
              h("Badge", {
                props: {
                  status: colorStatus,
                  text: titleText,
                },
              }),
            ]);
          },
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 140,
          fixed: "right",
        },
      ],

      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      data: [], // 表单数据
      pageNumber: 1, // 当前页数
      pageSize: 10, // 页面大小
      total: 0, // 表单数据总数
      ////////////////////////////////////////////////添加车辆/////////////////////////////////////////////
      vehicleFontPicFileUrl: "", //行驶证主页
      vehicleBackPicFileUrl: "", //行驶证副页
      xingshizhengfuyebeimian: "", //行驶证副页背面
      vehicleWorkPicFileUrl: "", //主车运输证
      trailerFontPicFileUrl: "", //行驶证主页-挂
      trailerBackPicFileUrl: "", //行驶证副页-挂
      trailerWorkPicFileUrl: "", //挂车运输证
      guachexingshizhengfuyebeimian: "", //行驶证副页背面-挂
      yingyezhizhaoPicFileUrl: "", //营业执照
      xukezhengPicFileUrl: "", //许可证
      coloType: [], //车牌颜色
      oilType: [], //能源类型
      vehicleLengths: [],
      vehicleType: [],
      load: 0, // 动态显示进度条
      DrivingLicenseHomePagetrue: false, // 关闭进度条
      CopyBrivingLicenstrue: false, // 关闭进度条
      CopyBackMaintrue: false, // 关闭进度条
      DrivingLicenseHangingtrue: false, // 关闭进度条
      ViceHangingtrue: false, // 关闭进度条
      Copybackhangingtrue: false, // 关闭进度条
      certificateMastertrue: false, // 关闭进度条
      certificateHangingtrue: false, // 关闭进度条
      BusineLicensetrue: false, // 关闭进度条
      licenBusinesstrue: false, // 关闭进度条
      loadinVehicleInfo: false,
      uploadVehiclePic: uploadVehiclePic,
      cehicleDrawer: false,
      VehicleTypLength: "", ///车型/车长
      vehicleText: "添加车辆",
      vehicleLicenseForm: {
        userId: "",
        vehicleOwner: "", //车辆所有人
        vehicleType: "", //车型 - 手动
        vehicleLength: "", //车长 - 手动
        vehicleLengthto: "",
        vehicleCodeType: "", //车辆类型 证件上的 PCR 识别来的
        vehicleId: "", //车辆ID - 修改用到
        vehicleNum: "", //车牌号

        useCharacter: "", //使用性质
        address: "", //车辆地址
        model: "", //品牌型号
        issuingAuthority: "", //发证机关 - 手动
        vin: "", //车辆唯一识别代码
        engineNum: "", //发动机号
        registerDate: "", //注册时间
        issueDate: "", //发证时间
        approvedCapacity: "", //核定载人数
        approvedLoad: "", //核定载质量 - 手动
        fileNo: "", //档案编号
        grossMass: "", //总质量
        tractionMass: "", //准牵引质量
        unladenMass: "", //整备质量
        inspectionRecord: "", //行驶证有效期
        overallDimension: "", //外廓尺寸
        colorType: "", //车牌颜色 - 手动
        oilType: "", //能源类型 - 手动
        relationType: "", //归属关系 - 手动
        workFileNo: "", //车辆运输证号 - 手动
        validityPeriodDate: "", //车辆运输中有效期 - 手动
        roadPermitNo: "", //道路经营许可证号 - 手动
        roadPermitNoDate: "", //道路经营许可证有效期 - 手动
        socialCreditOrCardNo: "", //车辆所有人证件号 - 手动
        vehicleOwnerPhoneNo: "", //车辆所有人联系电话 - 手动
        vehicleLicenseFontPicFileID: "", //主-行驶证主页图片ID
        vehicleLicenseBackPicFileID: "", //主-行驶证副页图片ID
        xszFyBmPicFileID: "", //⾏驶证副⻚-背⾯
        vehicleWorkLicenseFileID: "", //道路运输证
        carWide: "", //外廓 - 宽
        carLong: "", //外廓 - 长
        carHigh: "", //外廓 - 高

        trailerNum: "", //挂车 --- 车牌号码
        trailerVehicleCodeType: "", //挂车 --- 车型
        trailerVehicleCodeType: "", //挂车 --- 车型
        trailerVehicleOwner: "", //挂车 --- 所有人名称
        trailerUseCharacter: "", //挂车 --- 使用性质

        trailerAddress: "", //挂车 --- 地址
        trailerModel: "", //挂车 --- 车辆型号
        trailerEngineNum: "", //挂车 --- 发动机号码
        trailerVin: "", //挂车 --- 车辆识别代号
        trailerIssueDate: "", //挂车 --- 发证日期
        trailerregisterDate: "", //挂车 --- 注册时间

        trailerApprovedCapacity: "", //挂车 --- 核定载人数
        trailerApprovedLoad: "", //挂车 --- 核定载质量
        trailerFileNo: "", //挂车 --- 档案编号
        trailerGrossMass: "", //挂车 --- 总质量
        trailerTractionMass: "", //挂车 --- 准牵引质量
        trailerUnladenMass: "", //挂车 --- 整备质量
        trailerInspectionRecord: "", //挂车 --- 行驶证有效期
        trailerOverallDimension: "", //挂车 --- 外廓尺寸
        trailerValidityPeriodDate: "", //挂车 --- 挂车运输证有效期
        trailerWorkFileNo: "", //挂车 --- 运输许可证号
        xszGcFyBmPicFileID: "", //挂车 --- 行驶证(挂车)副页 背面
        trailerLicenseFontPicFileID: "", //挂车 --- 行驶证主页正面地址
        trailerLicenseBackPicFileID: "", //挂车 --- 行驶证主页反面地址
        trailerWorkLicenseFileID: "", //挂车 --- 运输许可证
        trailerissuingAuthority: "", //挂车 --- 行驶证发证机关
        insuranceRemarks: "", // 备注 - 选填
      },
      switchShow: false,
      form: {},
      formValidate: {
        vehicleNum: [
          {
            required: true,
            message: "请输入车牌号码",
            trigger: "blur",
          },
        ],
        userId: [
          {
            required: true,
            message: "请选择实际所有人",
            trigger: "change",
          },
        ],
        vehicleType: [
          {
            required: true,
            message: "请选择车辆可拉货类型（一级）",
            trigger: "change",
          },
        ],
        vehicleLengthto: [
          {
            required: true,
            type: "array",
            message: "请选择车辆可拉货类型（二级）",
            trigger: "change",
          },
        ],
        vehicleCodeType: [
          {
            required: true,
            message: "请选择车辆类型",
            trigger: "change",
          },
        ],
        colorType: [
          {
            required: true,
            message: "请选择车牌颜色",
            trigger: "change",
          },
        ],
        oilType: [
          {
            required: true,
            message: "请选择能源类型",
            trigger: "change",
          },
        ],
        vin: [
          {
            required: true,
            message: "请输入车辆识别代码",
            trigger: "blur",
          },
        ],
        fileNo: [
          {
            required: true,
            message: "请输入档案编号",
            trigger: "blur",
          },
        ],
        engineNum: [
          {
            required: true,
            message: "请输入发动机号",
            trigger: "blur",
          },
        ],
        registerDate: [
          {
            required: true,
            message: "请选择注册日期",
            trigger: "change",
          },
        ],
        issueDate: [
          {
            required: true,
            message: "请选择发证日期",
            trigger: "change",
          },
        ],
        inspectionRecord: [
          {
            required: true,
            message: "请选择行驶证有效期",
            trigger: "change",
          },
        ],
        issuingAuthority: [
          {
            required: true,
            message: "请输入驾驶证发证机关",
            trigger: "blur",
          },
        ],

        useCharacter: [
          {
            required: true,
            message: "请输入使用性质",
            trigger: "blur",
          },
        ],
        approvedLoad: [
          {
            required: true,
            message: "请输入核定载质量",
            trigger: "blur",
          },
        ],
        grossMass: [
          {
            required: true,
            message: "请输入总质量",
            trigger: "blur",
          },
        ],
        tractionMass: [
          {
            required: true,
            message: "请输入准牵引质量",
            trigger: "blur",
          },
        ],
        unladenMass: [
          {
            required: true,
            message: "请输入整备质量",
            trigger: "blur",
          },
        ],
        // relationType: [
        //   {
        //     required: true,
        //     message: "请选择归属关系",
        //     trigger: "change",
        //   },
        // ],
        workFileNo: [
          {
            required: true,
            message: "请输入道路运输证号",
            trigger: "blur",
          },
        ],

        validityPeriodDate: [
          {
            required: true,
            message: "审验有效期",
            trigger: "change",
          },
        ],

        vehicleOwner: [
          {
            required: true,
            message: "请输入车辆所有人",
            trigger: "blur",
          },
        ],
        socialCreditOrCardNo: [
          {
            required: true,
            message: "请输入所有人证件号",
            trigger: "blur",
          },
        ],
        vehicleOwnerPhoneNo: [
          {
            required: true,
            message: "请输入所有人手机号",
            trigger: "blur",
          },
        ],
        roadPermitNo: [
          {
            required: true,
            message: "请输入经营许可证号",
            trigger: "blur",
          },
        ],
        roadPermitNoDate: [
          {
            required: true,
            message: "请选择经营许可证好有效期至",
            trigger: "change",
          },
        ],

        carWide: [
          {
            required: true,
            message: "请选择车长",
            trigger: "change",
          },
        ],

        carLong: [
          {
            required: true,
            message: "请选择车宽",
            trigger: "change",
          },
        ],
        carHigh: [
          {
            required: true,
            message: "请选择车高",
            trigger: "change",
          },
        ],

        trailercarWide: [
          {
            required: true,
            message: "请选择车长",
            trigger: "change",
          },
        ],

        trailercarLong: [
          {
            required: true,
            message: "请选择车宽",
            trigger: "change",
          },
        ],
        trailercarHigh: [
          {
            required: true,
            message: "请选择车高",
            trigger: "change",
          },
        ],

        trailerVehicleCodeType: [
          {
            required: true,
            message: "请选择车型",
            trigger: "change",
          },
        ],
        trailerGrossMass: [
          {
            required: true,
            message: "请输入总质量",
            trigger: "blur",
          },
        ],
        trailerApprovedLoad: [
          {
            required: true,
            message: "请输入核定载质量",
            trigger: "blur",
          },
        ],
        trailerOverallDimension: [
          {
            required: true,
            message: "请输入外廓尺寸",
            trigger: "blur",
          },
        ],
        trailerVehicleOwner: [
          {
            required: true,
            message: "请输入所有人",
            trigger: "blur",
          },
        ],
        trailerUseCharacter: [
          {
            required: true,
            message: "请输入使用性质",
            trigger: "blur",
          },
        ],
        trailerVin: [
          {
            required: true,
            message: "请输入车辆识别代码",
            trigger: "blur",
          },
        ],

        trailerIssueDate: [
          {
            required: true,
            message: "请选择发证日期",
            trigger: "blur",
          },
        ],

        trailerNum: [
          {
            required: true,
            message: "请输入挂车车牌号",
            trigger: "blur",
          },
        ],
        trailerFileNo: [
          {
            required: true,
            message: "请输入驾驶证档案号",
            trigger: "blur",
          },
        ],
        trailerInspectionRecord: [
          {
            required: true,
            message: "请选择行驶证有效期",
            trigger: "change",
          },
        ],
        trailerWorkFileNo: [
          {
            required: true,
            message: "请输入道路运输证件号",
            trigger: "blur",
          },
        ],
        trailerissuingAuthority: [
          {
            required: true,
            message: "请输入发证机关",
            trigger: "blur",
          },
        ],
        trailerValidityPeriodDate: [
          {
            required: true,
            message: "请选择审验有效期",
            trigger: "change",
          },
        ],
        trailerregisterDate: [
          {
            required: true,
            message: "请选择注册日期",
            trigger: "change",
          },
        ],
        overallDimension: [
          {
            required: true,
            message: "请输入外廓尺寸",
            trigger: "blur",
          },
        ],
      },
      // / 操作记录
      operationRecordModal: false,
      operationRecordData: {},
      // 换绑车老板
      rebindingModal: false, //弹框
      rebindingList: [], //数据
      rebindingData: {}, //id数据
      rebindinloading: false, //加载
      rebindingId: "", //选中的车老板id
      rebindinData: {
        manageUserName: "",
        manageUserPhone: "",
      },
      // GPS
      ModalGPs: false,
      inputGPS: "",
      loadingGPS: false,
      loadingosition: false,
      rowGps: {},
      vehiclType:[]
    };
  },
  methods: {
    // 取消
    cancelMap() {
      this.curMapAddress = false;
    },
    //获取车辆最新位置
    getVehicleposition() {
      if (this.inputGPS.length >= 8) {
        this.loadingosition = true;
        let obj = { vehicleId: this.inputGPS };
        vehicleposition(obj).then((res) => {
          this.loadingosition = false;
          if (res.code == 200) {
            this.$Message.info("GPS设备号测试成功");
          } 
        });
      } else {
        this.$Message.warning("请填写GPS设备号,最少8位");
      }
    },


    VehicleTypeLengths(val, num) {
      if (num == 2) {
        this.selectionSecondary(val);
      } else {
        this.selectionSecondarys(val);
      }
    },
    selectionSecondary(val) {
      this.vehicleLengths.forEach((e) => {
        if (e.value == val) {
          axios.get("/freight/dictData/getByType/" + e.title).then((res) => {
            if (res.success) {
              this.vehiclType = res.result;
            }
          });
        }
      });
    },
    selectionSecondarys(val) {
      this.vehicleLicenseForm.vehicleLengthto = "";
      this.vehicleLengths.forEach((e) => {
        if (e.value == val) {
          axios.get("/freight/dictData/getByType/" + e.title).then((res) => {
            if (res.success) {
              this.vehiclType = res.result;
            }
          });
        }
      });
    },
    //添加GPS
    addGPS(row) {
      if (row.gpsEquipment) {
        this.inputGPS = row.gpsEquipment;
      } else {
        this.inputGPS = "";
      }
      this.ModalGPs = true;
      this.rowGps = row;
    },
    // 修改GPS
    modifyGPS(row) {
      if (row.gpsEquipment) {
        this.rowGps = row;
        this.inputGPS = row.gpsEquipment;
      } else {
        this.inputGPS = "";
      }
      this.ModalGPs = true;
    },
    // 确定GPS
    determineGPS() {
      if (this.inputGPS.length >= 8) {
        let data = {
          vehicldId: this.rowGps.id,
          gpsEquipment: this.inputGPS,
        };
        this.loadingGPS = true;
        updateGpsEquipment(data).then((res) => {
          this.loadingGPS = false;
          if (res.code == 200) {
            this.ModalGPs = false;
            this.$Message.info("操作成功！");
            this.getDataList();
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        this.$Message.warning("请填写GPS设备号,最少8位");
      }
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          console.log(res);
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 操作记录点击
    operationRecordClick(row) {
      this.operationRecordModal = true;
      this.operationRecordData.logType = 4;
      this.operationRecordData.oid = row.id;
    },
    // 操作记录关闭
    operationRecordEnd(val) {
      this.operationRecordModal = val;
      this.operationRecordData = {};
    },
    //车主详情
    newOwnerDetailsOpen(row) {
      this.newOwnerDetails = true;
      this.newOwnerDetailsId = row.manageUserId;
    },
    //车主信息关闭
    newOwnerDetailsEnd(val) {
      this.newOwnerDetails = val;
      this.newOwnerDetailsId = "";
    },
    init() {
      this.getDataList();
    },

    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm.vehicleOwner = "";
      this.searchForm.vehicleNum = "";
      this.searchForm.relationType = "";
      this.searchForm.registStatus = "";
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.manageUserName = "";

      this.searchForm.mobile = "";
      this.searchForm.driverName = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "ios-arrow-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "ios-arrow-up";
      }
      this.drop = !this.drop;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    getDataList() {
      this.loading = true;
      companyVehicleManagementList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    // 恢复车辆
    recoveryCar(row) {
      this.$Modal.confirm({
        title: "恢复车辆",
        // 记得确认修改此处
        content: "确认恢复 " + row.vehicleNum + " 车辆吗?",
        loading: true,
        onOk: () => {
          let data = {
            registStatus: 1,
            vehicleId: row.id,
          };
          cancellationVehicle(data).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("恢复成功");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 注销车辆
    deletdCar(row) {
      this.$Modal.confirm({
        title: "注销车辆",
        // 记得确认修改此处
        content: "确认注销 " + row.vehicleNum + " 车辆吗?",
        loading: true,
        onOk: () => {
          let data = {
            registStatus: 4,
            vehicleId: row.id,
          };
          cancellationVehicle(data).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("注销成功");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },

    // 添加车辆
    addVehicle() {
      this.switchShow = false;
      this.imgShow = true;
      this.$refs.vehicleLicense.resetFields();
      this.showType = "2";
      this.vehicleText = "添加车辆";
      this.cehicleDrawer = true;
      // this.showDrawer = true;
      this.vehicleLicenseForm = {};
      this.vehicleFontPicFileUrl = ""; //行驶证主页
      this.vehicleBackPicFileUrl = "";
      this.trailerFontPicFileUrl = "";
      this.trailerBackPicFileUrl = "";
      this.vehicleWorkPicFileUrl = "";
      this.trailerWorkPicFileUrl = "";
      this.xingshizhengfuyebeimian = "";
      this.guachexingshizhengfuyebeimian = "";
      this.xukezhengPicFileUrl = "";
      this.yingyezhizhaoPicFileUrl = "";
    },

    // 修改车辆信息
    editVehicle(v) {
      this.editImg = true;
      this.imgShow = true;
      if (
        v.registStatus == null ||
        v.registStatus == "" ||
        v.registStatus == 0
      ) {
        // return this.$Message.warning("未认证");
      }
      this.actualOwner = v.name;
      this.spinShow = true;
      this.vehicleText = "车辆认证信息";
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      // let str = JSON.stringify(v);
      let data = v;
      this.form = data;
      if (
        this.form.informationTips != "" &&
        this.form.informationTips != null
      ) {
        if (
          this.form.informationTips.charAt(
            this.form.informationTips.length - 1
          ) == ","
        ) {
          this.form.informationTips = this.form.informationTips.substring(
            0,
            this.form.informationTips.lastIndexOf(",")
          );
        }
        this.form.informationTipsVehicle = this.form.informationTips.split(",");
      } else {
        this.form.informationTipsVehicle = this.form.informationTips;
      }
      // this.vehicleLicenseForm = data;
      this.showType = "1";
      this.cehicleDrawer = true;
      this.VehicleTypeLengths(data.vehicleType,2);
      this.getDriverId(data);
      this.$refs.vehicleLicense.resetFields();
    },
    // 修改获取图片
    getDriverId(data) {
      getDriverLicenseId({ vehicleId: data.id }).then((res) => {
        if (res.success) {
          if (res.result != null) {
            //
            if (res.result) {
              this.vehicleLicenseForm.userId = res.result.manageUserId; //实际所有人

              this.vehicleLicenseForm.roadPermitNoDate =
                res.result.roadPermitNoDate; //经营许可证有效期至

              this.vehicleLicenseForm.tractionMass = res.result.tractionMass; //准牵引质量

              this.vehicleLicenseForm.unladenMass = res.result.unladenMass; //整备质量

              this.vehicleLicenseForm.vehicleNum = res.result.vehicleNum; //车辆牌号

              this.vehicleLicenseForm.colorType = res.result.colorType; //车牌颜色

              this.vehicleLicenseForm.vehicleCodeType =
                res.result.vehicleCodeType; //车辆类型

              this.vehicleLicenseForm.vehicleOwner = res.result.vehicleOwner; //所有人

              this.vehicleLicenseForm.useCharacter = res.result.useCharacter; //使用性质

              this.vehicleLicenseForm.vin = res.result.vin; //车辆识别代码

              this.vehicleLicenseForm.issuingAuthority =
                res.result.issuingAuthority; //发证机关

              this.vehicleLicenseForm.registerDate = res.result.registerDate; //注册日期

              this.vehicleLicenseForm.issueDate = res.result.issueDate; //发证日期

              this.vehicleLicenseForm.inspectionRecord =
                res.result.inspectionRecord; //检验有效期至

              this.vehicleLicenseForm.oilType = res.result.oilType; //车辆能源类型

              if (res.result.approvedLoad == "0") {
                this.vehicleLicenseForm.approvedLoad = "--";
              } else {
                this.vehicleLicenseForm.approvedLoad = res.result.approvedLoad; //核定载质量
              }

              this.vehicleLicenseForm.grossMass = res.result.grossMass; //总质量

              this.vehicleLicenseForm.fileNo = res.result.fileNo; //档案编号

              this.vehicleLicenseForm.overallDimension =
                res.result.overallDimension; //外廓尺寸

              this.vehicleLicenseForm.carWide = res.result.carWide; ///外廓 - 长

              this.vehicleLicenseForm.carLong = res.result.carLong; //外廓 宽

              this.vehicleLicenseForm.carHigh = res.result.carHigh; //外廓 高

              this.vehicleLicenseForm.vehicleLengthto =
                res.result.vehicleLength.split(",");

              this.vehicleLicenseForm.vehicleType = res.result.vehicleType; //车型

              this.vehicleLicenseForm.workFileNo = res.result.workFileNo; //道路运输证号

              this.vehicleLicenseForm.validityPeriodDate =
                res.result.validityPeriodDate; //运输证有效期

              this.vehicleLicenseForm.roadPermitNo = res.result.roadPermitNo; //道路运输经营许可证号

              this.vehicleLicenseForm.insuranceRemarks =
                res.result.insuranceRemarks; //备注

              // //主-行驶证主页图片ID
              if (res.result.vehicleLicenseFontPicFileID != null) {
                this.vehicleLicenseForm.vehicleLicenseFontPicFileID =
                  res.result.vehicleLicenseFontPicFileID;

                this.vehicleFontPicFileUrl = this.imgFormat(
                  this.vehicleLicenseForm.vehicleLicenseFontPicFileID
                );
              }

              //主-行驶证副页图片ID
              if (res.result.vehicleLicenseBackPicFileID != null) {
                this.vehicleLicenseForm.vehicleLicenseBackPicFileID =
                  res.result.vehicleLicenseBackPicFileID;

                this.vehicleBackPicFileUrl = this.imgFormat(
                  this.vehicleLicenseForm.vehicleLicenseBackPicFileID
                );
              }
            }
            this.vehicleLicenseForm.vehicleId = this.vehicleLicenseForm.id;
          }
        } else {
          this.$Message.error(res.message);
        }
      });
      setInterval(() => {
        this.spinShow = false;
      }, 1000);
    },
    // 图片格式化
    imgFormat(val) {
      let img = "";
      if (val) {
        img = this.$baseUrl + val;
      }
      return img;
    },
    // 换绑车老板

    // 添加车老板
    rebindinAdd(row) {
      if (row.registStatus !== 1) {
        return this.$Message.warning("请选择已认证车辆");
      }
      this.rebindingId = "";
      this.rebindingList = [];
      this.rebindinData = row;
      this.rebindingModal = true;
    },
    // 下拉框
    rebindingChange(val) {
      if (val) {
        let text = /^[\u4e00-\u9fa5]{0,}$/;
        let reg = /^[1-9]\d*$/;
        if (text.test(val)) {
          if (val.length > 1) {
            this.$set(this.rebindingData, "rebindingtext", val);
            this.getRebindinData();
          }
        }
        if (reg.test(val)) {
          if (val.length > 3) {
            this.$set(this.rebindingData, "rebindingtext", val);
            this.getRebindinData();
          }
        }
      }
    },
    //获取未绑定车老板列表接口
    getRebindinData(row) {
      getActualdriverPage(this.rebindingData).then((res) => {
        if (res.code == 200) {
          this.rebindingList = res.result;
          this.rebindingData.rebindingtext = "";
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 添加确定车老板
    rebindinDetermine() {
      if (this.rebindingId == "") {
        return this.$Message.warning("请选择您要换绑的车老板");
      }
      let data = {
        transportationId: this.rebindingId,
        vehicleId: this.rebindinData.id,
      };
      this.rebindinloading = true;
      rebindingVehicle(data).then((res) => {
        this.rebindinloading = false;
        if (res.code == 200) {
          this.rebindingModal = false;
          this.$Message.info("操作成功！");
          this.getDataList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    // 驾驶员
    BidderdDiver(row) {
      this.BidderdUserId = row.userId;
      this.driverModalue = true;
    },
    // 驾驶员详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
    // 添加驾驶驾驶员
    addDriver(row) {
      this.getDriver(row);
      this.derverId = "";
      this.addDriverModal = true;
      this.getUnboundDriver = [];
      this.currVehicleId = row.id;
    },

    //获取未绑定驾驶员列表接口
    getDriver(row) {
      getDriverInfoByUserIds({ userId: row.manageUserId }).then((res) => {
        if (res.code == 200) {
          this.getUnboundDriver = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    // 添加驾驶员输入框编辑
    changeDriver(val) {},

    // 给车辆添加驾驶驾驶员
    sureAddDriver() {
      if (this.derverId == "") {
        return this.$Message.warning("请选择您要添加的驾驶员");
      }
      let data = {
        vehicleId: this.currVehicleId,
        userId: this.derverId,
      };
      this.Driverloading = true;
      bindingDriver(data).then((res) => {
        this.Driverloading = false;
        if (res.code == 200) {
          this.addDriverModal = false;
          this.$Message.info("操作成功！");
          this.getDataList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    // 给车辆移出驾驶驾驶员
    removeDriverClick(row) {
      this.$Modal.confirm({
        title: "解绑驾驶员",
        content: "是否将 " + row.driverName + " 与该车辆解绑?",
        loading: true,
        onOk: () => {
          removeDriver({
            userId: row.userId,
          }).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("操作成功！");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },

    //管理者个人信息
    manageUserInfo(row) {
      //管理者信息
      this.$Modal.info({
        title: "管理者信息",
        content: `账号： ${row.manageUserPhone}
        <br> 公司名称： ${row.manageUserName}
            <br>联系人： ${row.name}
            `,
      });
    },
    // 添加管理人
    addManageUser(row) {
      this.manageUserId = "";
      this.addManageUserModal = true;
      this.getManageUserList = [];
      this.currVehicleId = row.id;
    },

    // 获取管理人列表数据
    getManageUser(val) {
      getManageUserIdUser({ mobile: val }).then((res) => {
        if (res.code == 200) {
          this.getManageUserList = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    // 管理人输入框编辑
    changeManageUser(val) {
      this.searchManageUser = val;
      if (this.searchManageUser.length >= "2") {
        this.getManageUser(this.searchManageUser);
      }
    },

    // 给车辆添加管理人
    sureAddManagerUser() {
      if (this.manageUserId == "") {
        return this.$Message.warning("请输入搜索您要添加的管理人");
      }
      let data = {
        vehicleId: this.currVehicleId,
        userId: this.manageUserId,
      };
      this.AddManagerUserloading = true;
      bindingManagerUser(data).then((res) => {
        this.AddManagerUserloading = false;
        if (res.code == 200) {
          this.searchManageUser = "";
          this.addManageUserModal = false;
          this.$Message.success("操作成功！");
          this.getDataList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    // 给车辆移出驾驶驾驶员
    removeManageUserClick(row) {
      this.$Modal.confirm({
        title: "解绑管理人",
        content: "是否将 " + row.manageUserName + " 与该车辆解绑?",
        loading: true,
        onOk: () => {
          removeManagerUser({
            vehicleId: row.id,
          }).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("操作成功！");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },

    ///////////////////////////////////////////////////////////////////  添加车辆 /////////////////////////////////////////////////////////////////////////////////////////////
    // 通过车辆信息认证
    adoptVehicleInfo() {
      let data = {
        vehicldId: this.vehicleLicenseForm.id,
        registState: 1,
      };
      this.$Modal.confirm({
        title: "确认通过",
        // 记得确认修改此处
        content:
          "确认通过 " +
          this.vehicleLicenseForm.vehicleNum +
          " 车辆的认证信息吗？",
        loading: true,
        onOk: () => {
          vehicleRegistStatus(data).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.cehicleDrawer = false;
              this.$Message.success("审核通过");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 驳回车辆信息认证
    repulseVehicleInfo() {
      this.auditFailedModal = true;
      this.AuditFailedInput = "";
      this.confirmRejection =
        "确认拒绝 " +
        this.vehicleLicenseForm.vehicleNum +
        " 车辆的认证信息吗？";
    },
    // 审核不通过
    auditRejectDetermine() {
      if (this.AuditFailedInput == "") {
        this.$Message.warning("请输入审核不通过原因");
        return false;
      }
      this.loadingbut = true;
      vehicleRegistStatus({
        vehicldId: this.vehicleLicenseForm.id,
        registState: 0,
        reason: this.AuditFailedInput,
      }).then((res) => {
        this.loadingbut = false;
        if (res.success) {
          this.cehicleDrawer = false;
          this.$Message.success("审核拒绝");
          this.getDataList();
          this.auditFailedModal = false;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 保存车辆信息认证
    submitVehicleInfo() {
      this.$refs.vehicleLicense.validate((valid) => {
        if (valid) {
          if (this.vehicleFontPicFileUrl == "") {
            return this.$Message.error("请上传行驶证主页(主)");
          } else if (this.vehicleBackPicFileUrl == "") {
            return this.$Message.error("请上传行驶证副页(主)");
          }
          if (this.form.id) {
            this.vehicleLicenseForm.vehicleId = this.form.id;
          }
          this.loadinadd = true;
          this.loadinVehicleInfo = true;
          for (var key in this.vehicleLicenseForm) {
            if (
              this.vehicleLicenseForm[key] == null ||
              this.vehicleLicenseForm[key] == "Undefined" ||
              this.vehicleLicenseForm[key] == ""
            ) {
              delete this.vehicleLicenseForm[key];
            }
          }
          if (this.vehicleLicenseForm.vehicleLengthto.length > 0) {
            this.vehicleLicenseForm.vehicleLength =
              this.vehicleLicenseForm.vehicleLengthto.join(",");
          }
          saveVehicleLicenseInfo(this.vehicleLicenseForm).then((res) => {
            this.loadinVehicleInfo = false;
            this.loadinadd = false;
            if (res.success) {
              this.vehicleLicenseForm.registStatus = 2;
              this.$Message.success("车辆资料保存成功");

              this.getDataList();
              setTimeout(() => {
                this.data.forEach((item) => {
                  if (item.id == this.form.id) {
                    this.editVehicle(item);
                  }
                });
              }, 600);
            } else {
              this.$Message.error(res.message);
            }
          });
        } else {
          return this.$Message.warning("车辆认证资料不完整");
        }
      });
    },
    // 注册日期
    changeDatezhuce(val) {
      this.vehicleLicenseForm.registerDate = val;
    },
    changetrailerregisterDatee(val) {
      this.vehicleLicenseForm.trailerregisterDate = val;
    },
    // 发证
    changeDatefazheng(val) {
      this.vehicleLicenseForm.issueDate = val;
    },
    changetrailerIssueDate(val) {
      this.vehicleLicenseForm.trailerIssueDate = val;
    },
    // 请选择运输证有效期-主
    changroadvalidityPeriodDate(val) {
      this.vehicleLicenseForm.validityPeriodDate = val;
    },
    // 请选择经营许可证好有效期至-主
    changeroadPermitNoDate(val) {
      this.vehicleLicenseForm.roadPermitNoDate = val;
    },
    // 行驶证
    changeDatexingshizheng(val) {
      this.vehicleLicenseForm.inspectionRecord = val;
    },
    //挂车 --- 行驶证有效期
    changetrailerInspectionRecord(val) {
      this.vehicleLicenseForm.trailerInspectionRecord = val;
    },
    // 运输证
    changeDateyunshuzheng(val) {
      this.vehicleLicenseForm.validityPeriodDate = val;
    },

    // 挂车 --- 挂车运输证有效期
    changetrailerValidityPeriodDate(val) {
      this.vehicleLicenseForm.trailerValidityPeriodDate = val;
    },
    // 行驶证有效期
    changeTrailerValidityPeriodDate(val) {
      this.vehicleLicenseForm.trailerInspectionRecord = val;
    },
    //  行驶证主页
    DrivingLicenseHomePage(event, file, fileList) {
      this.progressAll(event, 1);
    },
    // 行驶证副页
    CopyBrivingLicens(event, file, fileList) {
      this.progressAll(event, 2);
    },
    // 行驶证副页(背面-主)
    CopyBackMain(event, file, fileList) {
      this.progressAll(event, 3);
    },
    // 行驶证主页(挂)
    DrivingLicenseHanging(event, file, fileList) {
      this.progressAll(event, 4);
    },
    // 行驶证副页(挂)
    ViceHanging(event, file, fileList) {
      this.progressAll(event, 5);
    },
    // 行驶证副页(背面-挂)
    Copybackhanging(event, file, fileList) {
      this.progressAll(event, 6);
    },
    //  车辆运输证(主)
    certificateMaster(event, file, fileList) {
      this.progressAll(event, 7);
    },
    // 车辆运输证(挂)
    certificateHanging(event, file, fileList) {
      this.progressAll(event, 8);
    },
    // 经营许可证
    BusineLicense(event, file, fileList) {
      this.progressAll(event, 9);
    },
    // 营业执照
    licenBusiness(event, file, fileList) {
      this.progressAll(event, 10);
    },
    //进度条
    progressAll(data, num) {
      if (num == 1) {
        this.DrivingLicenseHomePagetrue = true; // 显示进度条
      } else if (num == 2) {
        this.CopyBrivingLicenstrue = true; // 显示进度条
      } else if (num == 3) {
        this.CopyBackMaintrue = true;
      } else if (num == 4) {
        this.DrivingLicenseHangingtrue = true;
      } else if (num == 5) {
        this.ViceHangingtrue = true;
      } else if (num == 6) {
        this.Copybackhangingtrue = true;
      } else if (num == 7) {
        this.certificateMastertrue = true;
      } else if (num == 8) {
        this.certificateHangingtrue = true;
      } else if (num == 9) {
        this.BusineLicensetrue = true;
      } else if (num == 10) {
        this.licenBusinesstrue = true;
      }
      var CardBack = setTimeout(() => {
        this.load = parseInt(data.percent); // 动态获取文件上传进度
      }, 500); // 一秒后关闭进度条
      setTimeout(() => {
        if (this.load >= 100) {
          this.load = 100;
          setTimeout(() => {
            if (num == 1) {
              //身份证正面进度条
              this.DrivingLicenseHomePagetrue = false; // 显示进度条
            } else if (num == 2) {
              //身份证反面进度条
              this.CopyBrivingLicenstrue = false; // 显示进度条
            } else if (num == 3) {
              //身份证反面进度条
              this.CopyBackMaintrue = false;
            } else if (num == 4) {
              this.DrivingLicenseHangingtrue = false;
            } else if (num == 5) {
              this.ViceHangingtrue = false;
            } else if (num == 6) {
              this.Copybackhangingtrue = false;
            } else if (num == 7) {
              this.certificateMastertrue = false;
            } else if (num == 8) {
              this.certificateHangingtrue = false;
            } else if (num == 9) {
              this.BusineLicensetrue = false;
            } else if (num == 10) {
              this.licenBusinesstrue = false;
            }
          }, 1000); // 一秒后关闭进度条
          clearTimeout(CardBack);
        }
      }, 501);
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    ////行驶证主-主
    vehicleFontSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
      }
      setInterval(() => {
        this.spinShow = false;
      }, 1000);
      // for (let i = 0; i < this.vehiclNewType.length; i++) {
      //   if (this.vehiclNewType[i].description == res.result.vehicleType) {
      //     this.vehicleLicenseForm.vehicleCodeType = this.vehiclNewType[i].value; //车辆类型
      //   }
      // }
      this.vehicleLicenseForm.issuingAuthority = res.result.issuingAuthority; //发证机关
      this.vehicleLicenseForm.vehicleOwner = res.result.vehicleOwner; //车辆所有人
      this.vehicleLicenseForm.vehicleNum = res.result.vehicleNum; //车牌号
      this.vehicleLicenseForm.useCharacter = res.result.useCharacter; //使用性质
      this.vehicleLicenseForm.overallDimension = res.result.overallDimension; //外廓尺寸
      this.vehicleLicenseForm.address = res.result.address; //车辆地址
      this.vehicleLicenseForm.model = res.result.model; //品牌型号
      this.vehicleLicenseForm.vin = res.result.vin; //车辆唯一识别代码
      this.vehicleLicenseForm.engineNum = res.result.engineNum; //发动机号
      this.vehicleLicenseForm.registerDate = res.result.registerDate; //注册时间
      this.vehicleLicenseForm.issueDate = res.result.issueDate; //发证时间
      this.vehicleLicenseForm.vehicleLicenseFontPicFileID = res.result.filepath; //主-行驶证主页图片ID
      if (this.vehicleLicenseForm.vehicleLicenseFontPicFileID != null) {
        this.vehicleFontPicFileUrl = this.$baseUrl + res.result.filepath;
      }
    },
    vehicleBackSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
      }
      setInterval(() => {
        this.spinShow = false;
      }, 1000);

      this.vehicleLicenseForm.approvedCapacity = res.result.approvedCapacity; //核定载人数
      this.vehicleLicenseForm.fileNo = res.result.fileNo; //档案编号
      if (res.result.grossMass) {
        this.vehicleLicenseForm.grossMass =
          res.result.grossMass.match(/\d+/g) / 1000 + "";
      } else {
        this.vehicleLicenseForm.grossMass = "--";
      }
      // 车辆能源类型
      if (res.result.oilType) {
        this.oilType.forEach((item) => {
          if (item.description == res.result.oilType) {
            this.vehicleLicenseForm.oilType = item.value;
          }
        });
      }
      if (res.result.approvedLoad) {
        //核定载质量
        this.vehicleLicenseForm.approvedLoad =
          res.result.approvedLoad.match(/\d+/g) / 1000 + "";
      } else {
        this.vehicleLicenseForm.approvedLoad = "--";
      }

      if (res.result.tractionMass) {
        this.vehicleLicenseForm.tractionMass =
          res.result.tractionMass.match(/\d+/g) / 1000 + ""; //准牵引质量
      } else {
        this.vehicleLicenseForm.tractionMass = "--";
      }

      if (res.result.unladenMass) {
        this.vehicleLicenseForm.unladenMass =
          res.result.unladenMass.match(/\d+/g) / 1000 + ""; //整备质量
      } else {
        this.vehicleLicenseForm.unladenMass = "--";
      }

      this.vehicleLicenseForm.overallDimension = res.result.overallDimension; //外廓尺寸
      this.vehicleLicenseForm.vehicleLicenseBackPicFileID = res.result.filepath; //主-行驶证副页图片ID
      if (this.vehicleLicenseForm.vehicleLicenseBackPicFileID != null) {
        this.vehicleBackPicFileUrl = this.$baseUrl + res.result.filepath;
      }
    },
    handleRemove(file, num) {
      if (num == 1) {
        //  行驶证主页(主)
        this.vehicleFontPicFileUrl = "";
      } else if (num == 2) {
        // 行驶证副页(主)
        this.vehicleBackPicFileUrl = "";
      } else if (num == 3) {
        //  行驶证副页(背面-主)
        this.xingshizhengfuyebeimian = "";
      } else if (num == 4) {
        // 道路运输证(主)
        this.vehicleWorkPicFileUrl = "";
      } else if (num == 5) {
        //行驶证主页(挂
        this.trailerFontPicFileUrl = "";
      } else if (num == 6) {
        // 行驶证副页(挂)
        this.trailerBackPicFileUrl = "";
      } else if (num == 7) {
        // 行驶证副页(背面-挂)
        this.guachexingshizhengfuyebeimian = "";
      } else if (num == 8) {
        // 道路运输证(挂)
        this.trailerWorkPicFileUrl = "";
      }
    },
    // 查看图片
    showPic(v) {
      let image = new Image();
      image.src = v;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    // 是否有挂车
    changeSwitch(val) {},
  },
  mounted() {
    this.init();
    this.vehicleLengths = JSON.parse(window.localStorage.getItem("good_type"));
    // this.vehiclType = JSON.parse(window.localStorage.getItem("vehicle_type"));
    this.vehiclNewType = JSON.parse(
      window.localStorage.getItem("vehicle_new_type")
    );

    // console.log(this.vehiclNewType,this.vehicleLength);
    this.vehicleType = JSON.parse(window.localStorage.getItem("vehicle_type"));
    this.coloType = JSON.parse(window.localStorage.getItem("color_type"));
    this.oilType = JSON.parse(window.localStorage.getItem("oil_type"));
  },
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/table-common.less";
.popover-Tag {
  margin-top: 4px;
}
.search {
  .operation {
    margin-bottom: 2vh;
  }
  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }
  .select-clear {
    margin-left: 10px;
  }
  .page {
    margin-top: 2vh;
  }
  .drop-down {
    margin-left: 5px;
  }
}
.demo-drawer-footer-vehhcle {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 16px;
  text-align: right;
  background-color: #f5f5f5;
  border: 1px solid #cdcdcd;
}
.drawer-footer {
  z-index: 10;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  background: #fff;
}

.drawer-content::-webkit-scrollbar {
  display: none;
}
.drawer-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.drawer-title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  display: block;
  margin-bottom: 16px;
}
.demo-upload-list-vehicles {
  display: inline-block;
  width: 150px;
  height: 90px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list-vehicles img {
  width: 148px !important;
  height: 88.2px !important;
}
.demo-upload-list-vehicles-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list-vehicles:hover .demo-upload-list-vehicles-cover {
  display: block;
}
.demo-upload-list-vehicles-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  // margin: 0 2px;
  line-height: 90px;
}
.img-modal {
  z-index: 1200 !important;
  height: 2000%;
  width: 200%;
}
.ivu-input[disabled] {
  color: #666666 !important;
}
.demo-uploadcss-vehicle {
  margin-top: -13px;
  width: 150px;
  height: 5px;
}
.check {
  &::before {
    content: "*";
    display: inline-block;
    margin-right: 2px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
.xchecks {
  position: absolute;
  top: 5px;
  left: -35px;
}
.addVehicle {
  .vehicleModal {
    .ivu-modal {
      top: 130px;
    }
  }
}
.check_font {
  font-size: 12px;
  font-weight: 600;
}
.DrawerDiv {
  max-height: 85vh;
  overflow: auto;
}
.DrawerDiv1 {
  max-height: 85vh;
  overflow: auto;
}
.but1 {
  width: 100%;
  height: 40px;
}
.butSubmi {
  width: 100%;
  height: 30px;
}
.split-line {
  width: 100%;
  height: 1px;
  // color: #515a6e;
  background-color: #d3d3d3;
  margin: 40px 0;
}
.switch-css {
  margin-top: 30px;
}
.wigth {
  width: 200px;
  margin-left: -5px;
}
.Upload-border {
  .ivu-upload-drag {
    border: 0px !important;
  }
}
.more-css {
  .ivu-dropdown-item {
    text-align: left;
  }
}
</style>